window.addEvent ('domready', function () {
	
	// Variables de Drags y Drops
	var $drags = $$('#drags div');
	var $drops = $$('#drops div ');
	
	// Modificamos el desplazamiento de del fondo de los drops (background-position).
	$drops.each (function ($drop, iI) {
		var $bgPos = iI*(-180).toString() + 'px -180px';
		$drop.setStyle ('background-position', $bgPos);
	});
	
	/*
	for (var i = 0 ; i < $drags.length; i++){
		var myDrag = new Drag.Move($drags[i], {
		    droppables: '.drop'	 
		});
	}
	*/
	
	
	// Creamos objeto tipo Drag and Drop Basico
	miDxD = new DxD ($drags, $drops, {
		container: $('content'),
		dragDelete: true,
		sendToBack: 'ini',
		cssClass: 'miDxD',
		adjDrags: [
			{ x: 10, y: 500 },
			{ x: 110, y: 500 },
			{ x: 210, y: 500 },
			{ x: 310, y: 500 },
			
			{ x: 410, y: 500 },
			{ x: 510, y: 500 },
			{ x: 610, y: 500 },
			{ x: 710, y: 500 }
		],
		adjDrops: [
			{ x: 10, y: 100 },
			{ x: 120, y: 100 },
			{ x: 230, y: 100 },
			{ x: 340, y: 100 },
			
			{ x: 450, y: 100 },
			{ x: 560, y: 100 },
			{ x: 670, y: 100 },
			{ x: 780, y: 100 }
		]
	});
	
	miDxD.addEvents ({
		'beforeStart': function ($objDrag) {
			console.log ($objDrag);
		},
		'enter': function ($objDrag, $objDrop) {
			console.log ($objDrop);
		}

	})
});